{% extends 'base/base.html' %}
{% load static %}

{% block title %}{{ project.name }} - 项目详情{% endblock %}

{% block content %}
<div class="project-detail">
    <div class="project-header mb-4">
        <div class="d-flex justify-content-between align-items-start">
            <div>
                <h1 class="mb-2">
                    <i class="fa fa-folder-open-o" aria-hidden="true"></i> {{ project.name }}
                </h1>
                <p class="text-muted mb-0">{{ project.description|default:"暂无项目描述" }}</p>
            </div>
            <div class="d-flex gap-2">
                {% if user_role == 'admin' or user_role == 'developer' %}
                    <a href="{% url 'projects:project_update' project.id %}" class="btn btn-warning">
                        <i class="fa fa-pencil" aria-hidden="true"></i> 编辑项目
                    </a>
                {% endif %}
                {% if user_role == 'admin' %}
                    <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
                        <i class="fa fa-trash" aria-hidden="true"></i> 删除项目
                    </button>
                {% endif %}
            </div>
        </div>
        
        <div class="project-tags mt-3">
            <div class="d-flex align-items-center mb-2">
                <h5 class="mb-0 me-3">项目标签</h5>
                {% if user_role == 'admin' or user_role == 'developer' %}
                    <a href="{% url 'projects:project_tags' project.id %}" class="btn btn-sm btn-outline-primary">
                        <i class="fa fa-tags" aria-hidden="true"></i> 管理标签
                    </a>
                {% endif %}
            </div>
            {% if project.tags.all %}
                <div class="tag-container">
                    {% for tag in project.tags.all %}
                        <span class="tag" style="background-color: {{ tag.color }};">{{ tag.name }}</span>
                    {% endfor %}
                </div>
            {% else %}
                <p class="text-muted">暂无标签</p>
            {% endif %}
        </div>
    </div>

    <!-- 标签页导航 -->
    <ul class="nav nav-tabs" id="projectTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" 
                    type="button" role="tab" aria-controls="overview" aria-selected="true">
                <i class="fa fa-info-circle" aria-hidden="true"></i> 概览
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="members-tab" data-bs-toggle="tab" data-bs-target="#members" 
                    type="button" role="tab" aria-controls="members" aria-selected="false">
                <i class="fa fa-users" aria-hidden="true"></i> 成员管理
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="webhooks-tab" data-bs-toggle="tab" data-bs-target="#webhooks" 
                    type="button" role="tab" aria-controls="webhooks" aria-selected="false">
                <i class="fa fa-plug" aria-hidden="true"></i> Webhooks
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" 
                    type="button" role="tab" aria-controls="messages" aria-selected="false">
                <i class="fa fa-envelope" aria-hidden="true"></i> 消息管理
            </button>
        </li>
    </ul>

    <!-- 标签页内容 -->
    <div class="tab-content mt-4" id="projectTabsContent">
        <!-- 概览标签页 -->
        <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">项目信息</h5>
                        </div>
                        <div class="card-body">
                            <p><strong>创建者:</strong> {{ project.created_by.username }}</p>
                            <p><strong>创建时间:</strong> {{ project.created_at|date:"Y年m月d日 H:i:s" }}</p>
                            <p><strong>更新时间:</strong> {{ project.updated_at|date:"Y年m月d日 H:i:s" }}</p>
                            <p><strong>成员数量:</strong> {{ project.members.count }} 人</p>
                            <p><strong>Webhook数量:</strong> {{ project.webhooks.count }} 个</p>
                        </div>
                        <div class="card-footer">
                            <a href="{% url 'projects:project_update' project.id %}" class="btn btn-primary">
                                <i class="fa fa-cog" aria-hidden="true"></i> 项目设置
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">快速操作</h5>
                        </div>
                        <div class="card-body">
                            <div class="d-grid gap-2">
                            
                                {% if user_role == 'admin' or user_role == 'developer' %}
                                    <a href="{% url 'projects:project_add_webhook' project.id %}" class="btn btn-success">
                                        <i class="fa fa-plug" aria-hidden="true"></i> 添加Webhook
                                    </a>
                                {% endif %}
                                <a href="{% url 'projects:message_list' project.id %}" class="btn btn-primary">
                                    <i class="fa fa-envelope" aria-hidden="true"></i> 查看消息
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 成员管理标签页 -->
        <div class="tab-pane fade" id="members" role="tabpanel" aria-labelledby="members-tab">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">项目成员</h5>
                    {% if user_role == 'admin' or user_role == 'developer' %}
                        <a href="{% url 'projects:project_add_member' project.id %}" class="btn btn-primary">
                            <i class="fa fa-user-plus" aria-hidden="true"></i> 添加成员
                        </a>
                    {% endif %}
                </div>
                <div class="card-body">
                    {% if project.members.all %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>用户名</th>
                                        <th>邮箱</th>
                                        <th>角色</th>
                                        <th>加入时间</th>
                                        {% if user_role == 'admin' or user_role == 'developer' %}
                                            <th>操作</th>
                                        {% endif %}
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for member in project.members.all %}
                                        <tr>
                                            <td>{{ member.user.username }}</td>
                                            <td>{{ member.user.email }}</td>
                                            <td>
                                                <span class="role-badge role-{{ member.role }}">{{ member.get_role_display }}</span>
                                            </td>
                                            <td>{{ member.joined_at|date:"Y年m月d日" }}</td>
                                            {% if user_role == 'admin' or user_role == 'developer' %}
                                                <td>
                                                    {% if user_role == 'admin' %}
                                                        <a href="{% url 'projects:project_update_member' project.id member.id %}" class="btn btn-sm btn-warning">
                                                            <i class="fa fa-pencil" aria-hidden="true"></i> 编辑
                                                        </a>
                                                        <a href="{% url 'projects:project_remove_member' project.id member.id %}" class="btn btn-sm btn-danger" onclick="return confirm('确定要移除此成员吗？');">
                                                            <i class="fa fa-trash" aria-hidden="true"></i> 移除
                                                        </a>
                                                    {% elif user_role == 'developer' and member.role != 'admin' %}
                                                        <a href="{% url 'projects:project_update_member' project.id member.id %}" class="btn btn-sm btn-warning">
                                                            <i class="fa fa-pencil" aria-hidden="true"></i> 编辑
                                                        </a>
                                                    {% endif %}
                                                </td>
                                            {% endif %}
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="text-muted">暂无项目成员</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Webhooks标签页 -->
        <div class="tab-pane fade" id="webhooks" role="tabpanel" aria-labelledby="webhooks-tab">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Webhooks</h5>
                    {% if user_role == 'admin' or user_role == 'developer' %}
                        <a href="{% url 'projects:project_add_webhook' project.id %}" class="btn btn-primary">
                            <i class="fa fa-plus" aria-hidden="true"></i> 添加Webhook
                        </a>
                    {% endif %}
                </div>
                <div class="card-body">
                    {% if project.webhooks.all %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>名称</th>
                                        <th>URL</th>
                                        <th>事件</th>
                                        <th>状态</th>
                                        <th>创建时间</th>
                                        {% if user_role == 'admin' or user_role == 'developer' %}
                                            <th>操作</th>
                                        {% endif %}
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for webhook in project.webhooks.all %}
                                        <tr>
                                            <td>{{ webhook.name }}</td>
                                            <td>
                                                <code style="word-break: break-word; white-space: pre-wrap; max-width: 400px; display: inline-block;">{{ webhook.url }}</code>
                                            </td>
                                            <td>
                                                {% for event in webhook.events %}
                                                    <span class="badge bg-secondary">{{ event }}</span>
                                                {% endfor %}
                                            </td>
                                            <td>
                                                {% if webhook.is_active %}
                                                    <span class="badge bg-success">启用</span>
                                                {% else %}
                                                    <span class="badge bg-danger">禁用</span>
                                                {% endif %}
                                            </td>
                                            <td>{{ webhook.created_at|date:"Y年m月d日" }}</td>
                                            {% if user_role == 'admin' or user_role == 'developer' %}
                                                <td>
                                                    <a href="{% url 'projects:project_edit_webhook' project.id webhook.id %}" class="btn btn-sm btn-warning">
                                                        <i class="fa fa-pencil" aria-hidden="true"></i> 编辑
                                                    </a>
                                                    {% if user_role == 'admin' %}
                                                        <a href="{% url 'projects:project_delete_webhook' project.id webhook.id %}" class="btn btn-sm btn-danger" onclick="return confirm('确定要删除此Webhook吗？');">
                                                            <i class="fa fa-trash" aria-hidden="true"></i> 删除
                                                        </a>
                                                    {% endif %}
                                                </td>
                                            {% endif %}
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="text-muted">暂无Webhooks</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 消息管理标签页 -->
        <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">消息管理</h5>
                    <a href="{% url 'projects:message_list' project.id %}" class="btn btn-primary">
                        <i class="fa fa-plus" aria-hidden="true"></i> 查看消息
                    </a>
                </div>
                <div class="card-body">
                    {% if project.messages.all %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>标题</th>
                                        <th>内容</th>
                                        <th>状态</th>
                                        <th>创建者</th>
                                        <th>创建时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for message in project.messages.all %}
                                        <tr>
                                            <td>{{ message.title }}</td>
                                            <td>{{ message.content|truncatechars:50 }}</td>
                                            <td>
                                                {% if message.status == 'pending' %}
                                                    <span class="badge bg-warning">未处理</span>
                                                {% elif message.status == 'processed' %}
                                                    <span class="badge bg-success">已处理</span>
                                                {% else %}
                                                    <span class="badge bg-secondary">{{ message.get_status_display }}</span>
                                                {% endif %}
                                            </td>
                                            <td>{{ message.created_by.username }}</td>
                                            <td>{{ message.created_at|date:"Y年m月d日" }}</td>
                                            <td>
                                                <a href="{% url 'projects:message_detail' project.id message.id %}" class="btn btn-sm btn-info">
                                                    <i class="fa fa-eye" aria-hidden="true"></i> 查看
                                                </a>
                                                {% if message.created_by == user or user_role == 'admin' or user_role == 'developer' %}
                                                    <a href="{% url 'projects:message_toggle_status' project.id message.id %}" class="btn btn-sm btn-warning">
                                                        <i class="fa fa-pencil" aria-hidden="true"></i> 编辑状态
                                                    </a>
                                                {% endif %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="text-muted">暂无消息</p>
                    {% endif %}
                </div>
            </div>
        </div>


    </div>
</div>

<!-- 删除项目确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>确定要删除项目 "<strong>{{ project.name }}</strong>" 吗？</p>
                <p class="text-danger">此操作不可恢复，项目下的所有数据都将被删除。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <a href="{% url 'projects:project_delete' project.id %}" class="btn btn-danger">
                    <i class="fa fa-trash" aria-hidden="true"></i> 确认删除
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script>
    // 添加页面加载动画效果
    document.addEventListener('DOMContentLoaded', function() {
        // 为标签页添加切换动画
        const tabButtons = document.querySelectorAll('.nav-link');
        tabButtons.forEach(button => {
            button.addEventListener('click', function() {
                const target = this.getAttribute('data-bs-target');
                const tabContent = document.querySelector(target);
                tabContent.style.opacity = '0';
                setTimeout(() => {
                    tabContent.style.opacity = '1';
                }, 100);
            });
        });
        
        // 为表格行添加悬停效果
        const tableRows = document.querySelectorAll('tbody tr');
        tableRows.forEach(row => {
            row.addEventListener('mouseenter', function() {
                this.style.backgroundColor = '#f8f9fa';
            });
            row.addEventListener('mouseleave', function() {
                this.style.backgroundColor = '';
            });
        });
    });
</script>
{% endblock %}